/**
 * 根据一些普片的css样式
 **/
 $major-color: #7EC0EE;
 $gray-color: #A6A6A6;
 // 关于头像
 @mixin userAvatarUrl-box ($width, $height, $radius-size){
 	width: $width;
	height: $height;
	border-radius: $radius-size;
	overflow: hidden;
 }
 
 // 关于flex布局
 @mixin flex-direction ($direction) {
 	display: flex;
	flex-direction: $direction;
 }
 
 // 关于页面XX%居中
 @mixin width-margin($width, $height) {
 	width: $width;
	height: $height;
	margin: 0 auto;
 }
 
 // icon图的大小
 @mixin icon-size ($width, $height) {
 	width: $width;
	height: $height;
 }
 
 // 关于字体
 $font-color: #000000 !default;
 @mixin font-style ($size, $weight, $font-color) {
 	font-size: $size;
	font-weight: $weight;
	color: $font-color;
 }
 
 // 关于有些页面是灰色背景的
 .page-backgroud{
	 width: 100%;
	 height: 100%;
	 background: #F2F2F2;
 }
 
 //在row里在左右两边的，如立即注册和修改密码的样式
 @mixin row-left-right($left-width, $right-width) {
	 @include flex-direction(row);
	 justify-content: space-between;
	 .left{
		 width: $left-width;
		 height: 100%;
		 display: flex;
		 justify-content: flex-start;
	 }
	 .right{
		 width: $right-width;
		 height: 100%;
		 display: flex;
		 justify-content: flex-end;
	 }
 }
 
 // 被点击的时候改变颜色
 .visited-color{
	 color: $major-color !important;
 }
 // 字体超出长度会变成...
 .cut-long-text{
	 text-overflow: ellipsis;
	 white-space: nowrap;
	 overflow: hidden;
 }
// 关于border和底部线条的颜色
$border-color: #F0F0F0;
// 温馨提示
.tips-box{
	width: 100%;
	height: 100rpx;
	border: 1px solid $border-color;
	background: #FFFEF5;
	.tips-inbox{
		@include width-margin(80%,100%);
		@include flex-direction(row);
		align-items: center;
		.icon{
			@include icon-size(60rpx,60rpx);
			margin-right: 30rpx;
		}
		.tips-text{
			@include font-style(17px, 500, $gray-color);
		}
	}
}
// 外部有border的自适应的框框
.gray-border-box{
	@include width-margin(90%, 100%);
	border: 1px solid #BBBBBB;
	border-radius: 8px;
	padding: 10rpx;
	background: #FFFFFF;
}
// 一条竖然后右边有文字
.blue-column-border-box{
	@include width-margin(90%, 90rpx);
	@include flex-direction(row);
	align-items: center;
	margin-top: 10rpx;
	.blue-border{
		width: 5%;
		height: 50rpx;
		border-left: 6px solid $major-color;
	}
	.blue-text{
		width: 80%;
		@include font-style(18px, bold, $major-color);
	}
}
